<template>
  <div class="conrainer">
    <div class="nav">
      <div @click="homePage">首页</div>
      <div>
        <n-popselect @update:value="selectCategory" v-model:value="selectedCategory" :options="categoryOptions"
          trigger="click">
          <div>分类<span>{{categoryName}}</span></div>
        </n-popselect>
      </div>
      <div @click="dashboard">后台</div>
    </div>
    <n-divider />

    <n-space class="search">
      <n-input v-model:value="pageInfo.keyword" :style="{ width: '500px' }" placeholder="请输入关键字" />
      <n-button type="primary" ghost @click="loadBlogs(0)"> 搜索 </n-button>
    </n-space>

    <!-- v-for这里的括号写错了 -->
    <div v-for="(ii,index) in blogList" style="margin-bottom:15px;cursor:pointer;">
      <n-card @click="toDetail(ii)" :title="ii.title">
        {{ii.content}}
        <template #footer>
          <n-space align="center">
            <div>
              发布时间：{{ii.create_time}}
            </div>

          </n-space>
        </template>
      </n-card>
    </div>
    <n-space>
      <n-pagination @update:page="loadBlogs" v-model:page="pageInfo.page" :page-count="pageInfo.pageCount" />
    </n-space>
    <n-divider />
    <!-- 分割线 -->
    <div class="footer">
      <div>Power by xxxxxxx</div>
      div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from 'vue'
import { AdminStore } from '../stores/AdminStore'  //1.引入
import { useRouter, useRoute } from 'vue-router'; //路由

const router = useRouter()
const route = useRoute()
const dialog = inject("dialog")

const message = inject("message")  //axiosTool 是我provide定义的名字
const axios = inject("axiosTool")  //axiosTool 是我provide定义的名字
const adminStore = AdminStore(); //2.实例化

const selectedCategory = ref(0)
const categoryOptions = ref([])

const categoryName = computed(() => {
  let selectedOption = categoryOptions.value.find((option) => {
    return option.value == selectedCategory.value
  })
  return selectedOption ? selectedOption.label : ""
})
const toPage = async (Number) => {
  pageInfo.page = Number
  loadBlogs();
}
const pageInfo = reactive({
  page: 1,
  pageSize: 3,
  pageCount: 0,
  count: 0,
  keyword: "",
  categoryId: 0
})

const selectCategory = (id) => {
  pageInfo.categoryId = id;
  loadBlogs()
}
onMounted(() => {
  loadCategorys()
  loadBlogs()
})

const blogList = ref([])

// 获取分类
const loadCategorys = async () => {
  let res = await axios.get("/categorty/list")
  // map（）可以把对象，转换成[key,vaule]的数组形式
  categoryOptions.value = res.data.rows.map((i) => {
    return {
      label: i.name,
      value: i.id
    }
  })
}
// 根据id找到value

// 获取博客
const loadBlogs = async (page = 0) => {
  if (page != 0) {
    pageInfo.page = page;
  }
  let res = await axios.get(`/blog/search?categoryId=${pageInfo.categoryId}&keyword=${pageInfo.keyword}&page=${pageInfo.page}&pageSize=${pageInfo.pageSize}`)
  let temp_rows = res.data.data.rows;
  for (let jj of temp_rows) {
    jj.content += "..."
    let d = new Date(jj.create_time)
    jj.create_time = `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
  }
  blogList.value = temp_rows;
  pageInfo.count = res.data.data.count
  // parseInt向下取整，就是不算小数点，  ，%是取余数
  pageInfo.pageCount = parseInt(pageInfo.count / pageInfo.pageSize) + (pageInfo.count % pageInfo.pageSize > 0 ? 1 : 0)

}

const homePage = () => {
  router.push("/")

}
const dashboard = () => {
  router.push("login")
}

const toDetail = (ii) => {
  router.push({
    path: "detail", query: {
      id: ii.id
    }
  })

}
</script>

<style lang="scss" scoped>
.conrainer {
  width: 1200px;
  margin: 0 auto
}

.nav {
  display: flex;
  font-size: 20px;
  font-weight: 800px;
  padding-top: 20px;
  color: #64676a;

  div {
    cursor: pointer;
    margin-left: 15px;

    &:hover {
      // 鼠标划过去会变色
      color: coral;
    }

    span {
      font-size: 12px;
    }
  }

}

.search {
  margin-bottom: 15px;
}

.footer {
  width: 500px;
  margin: 0px auto;
  color: #64676a;
  margin-bottom: 0px;
  text-align: center;
}
</style>